<template>
  <div class="home">
    <public-header></public-header>
    <el-row style="margin-top: 10px">
      <el-col :span="20" :offset="2">
        <el-menu class="el-menu-demo" mode="horizontal">
          <el-menu-item class="allPro" index="#">全部商品分类</el-menu-item>
          <el-menu-item index="1">戏剧</el-menu-item>
          <el-menu-item index="2">体育</el-menu-item>
          <el-menu-item index="3">亲子</el-menu-item>
          <el-menu-item index="4">舞蹈古典</el-menu-item>
          <el-menu-item index="5">摇滚</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="2" style="">
        <ul class="proList">
          <li>
            <i class="el-icon-ice-cream-round"></i><span>演唱会</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-service"></i><span>音乐会</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-thumb"></i><span>歌剧话剧</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-film"></i><span>曲苑杂坛</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-attract"></i><span>体育比赛</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-coordinate"></i><span>儿童亲子</span
            ><i class="el-icon-arrow-right"></i>
          </li>
          <li>
            <i class="el-icon-receiving"></i><span>舞蹈芭蕾</span
            ><i class="el-icon-arrow-right"></i>
          </li>
        </ul>
      </el-col>
      <el-col :span="16" style="">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for=item） in 4" :key="item">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    <el-row class="line">
      <el-col class="clr" :span="4" :offset="2">
        <!-- 12312 -->
        <h1 style="opacity: 0">2</h1>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import publicHeader from "../components/publicHeader.vue";
export default {
  name: "Home",
  components: {
    publicHeader,
  },
};
</script>
<style scoped>
.el-menu-demo {
  border: 1px solid #e8e8e8;
}
.el-menu-item {
  width: 100px;
}
.allPro {
  background-color: black;
  /* color: white; */
  width: 255px;
}
.proList {
  list-style: none;
  background-color: #ff3c1b;
  margin-top: -2px;
}
.proList li {
  height: 60px;
  line-height: 60px;
  color: white;
}
.proList li span {
  margin-left: 15px;
}
.proList li .el-icon-arrow-right {
  float: right;
  line-height: 60px;
  margin-right: 20px;
  opacity: 0.7;
}
.line {
  height: 40px;
  background-color: #a81316;
}
.clr {
  background-color: #ff3c1b;
}
</style>
